<template>
  <div>
    <zss-headermenu></zss-headermenu>
  
    <div style="margin-bottom:10px">
      <p class="zss_p">自动扣分</p>
      <Input v-model="value4" icon="ios-search" placeholder="请输入规则名称" style="width: 200px"></Input>
      <Button type="primary" @click="sousuo" style="padding:4px 15px">搜索</Button>
    </div>

    <div class="zss_guize">
      <!-- 加载进度圈开始 -->
      <Spin size="large" fix v-if="spinShow"></Spin>
      <!-- 加载进度圈结束 -->
      <Table border :row-class-name="zssrowclass" ref="selection" :columns="columns4" :data="guize"></Table>
    </div>

    <Modal v-model="bjfs" title="编辑">
      <p class="zss_bjp">
        扣除分数：
        <Input v-model="fsvalue" autofocus style="width: 200px"></Input>
      </p>
      <div slot="footer">
        <Button type="primary" size="large" @click="qdgz">确定</Button>
      </div>  
    </Modal>
  </div>
</template>

<script>
  import ZssHeadermenu from '../components/headerMenu'
  export default {
    data () {
      return {
        value4:'',
        bjfs:false,
        valueinput:'',
        fsvalue:'',
        jtnr:'',
        bjbz:'',
        spinShow: true,
        columns4: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            title: '规则名称',
            key: 'content'
          },
          {
            title: '扣除分数',
            key: 'value'
          },
          {
            title: '具体内容',
            key: 'content'
          },
          {
            title: '备注',
            key: 'note'
          },
          {
            title: '操作',
            width: 80,
            align: 'center',
            key: 'cz',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.row)
                    }
                  }
                }, '编辑')
              ]);
            }
          }
        ],
        guize:[]
      }
    },
    methods:{
      // 数据获取开始
      dataLode () {
        let that = this
        that.axios.get("/gleenSoft-base/credit/rule/list",{params:{
          // 搜索参数开始
          content: that.value4,
          type:'AUTO'
          // 搜索参数结束
        }}).then(
          (response) => {
            that.guize = response.data.result
            that.spinShow = false
          }
        )
      },
      // 数据获取结束

      // 搜索开始
      sousuo () {
        let that = this
        that.dataLode ()
      },
      // 搜索结束

      show (row) {
        let that = this
        that.bjfs=true
        that.valueinput=row.content
        that.fsvalue=row.value
        that.jtnr=row.content
        that.bjbz=row.note
        that.id=row.id
      },

      //编辑保存post后台开始
      qdgz (){
        let that = this
        if(that.fsvalue !== ''){
          that.axios.post("/gleenSoft-base/credit/rule/update",{
            id:that.id,         
            value:that.fsvalue
          }).then(
            (response) => {
              that.bjfs = false
              that.$Message.success('编辑成功')
              that.dataLode ()
            }
          )
        }
      },
      //编辑保存post后台结束
      
      zssrowclass (row,index){
        if (index %2 != 1) {
          return 'demo-table-info-row'
        }
      }
    },
    mounted () {
      this.dataLode()
    },
    components:{
      ZssHeadermenu
    }
  }
</script>


<style scode>
.zss_p{padding: 8px;border-left: 5px solid #495060;display: inline;}
.zss_guize .ivu-table .demo-table-info-row td{
    background-color:#EEFAFF;
}
.zss_bjp{text-align: center;padding:5px 0;}
</style>
